<template>
  <div class="list">
    <div v-for="(item,index) in datas" :key="item.id" class="item">
      <div class="index">{{ index + 1 }}</div>
      <div class="info">
        <div class="infoTitle">
          {{ item.name }}
        </div>
        <div v-if="type === 'cpkj'" class="progress">
          <a-progress :percent="Math.round(Number(item.ky) / Number(item.gy) * 100)" :show-info="false" strokeColor="#478787" strokeWidth="12"
                      trailColor="rgba(71, 135, 135, .3)"
          />
        </div>
        <div v-if="type !== 'cpkj'" class="info2">
          <div class="title1">{{ item.sm }}</div>
          <div class="pid">
            PID:{{ item.pid }}
          </div>
          <div class="data">
            {{ item.zb || 0 }}{{ dw }}
          </div>
        </div>
        <div v-else class="cpkjInfo">
          <div class="sm">
            {{ item.sm }}
          </div>
          <div class="zb">
            {{ item.ky }}GB可用,共{{ item.gy }}GB
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  datas: {
    type: Array,
    default: []
  },
  type: {
    type: String,
    default: ""
  },
  dw: {
    type: String,
    default: ""
  },
});
</script>

<style lang="less" scoped>
@import "@/styles/__index.less";

.list {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  height: 0;
  overflow-y: auto;
  margin: 8px 0;
  gap: 12px;
  .item {
    width: 100%;
    display: flex;
    gap: 10px;

    .index {
      .pmzd-blue;
      width: 20px;
      font-size: 23px;
    }

    .info {
      flex: 1;

      .progress {
        display: flex;
        justify-content: center;
        align-items: center;

        :deep(.ant-progress-line) {
          margin: 0;
        }
      }

      .infoTitle {
        font-size: 15px;
        font-weight: 500;
        color: #BCFFFF;
      }

      .cpkjInfo {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .info2 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;

        .title1 {
          flex: 3;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          -o-text-overflow: ellipsis;

        }

        .pid {
          font-size: 14px;
          color: #76BCB0;
          background: linear-gradient(to top, #439493, #132827);
          padding: 2px 5px;
          border-radius: 3px;
          flex: 2;
          text-align: center;
        }

        .data {
          .pmzd-blue;
          font-size: 23px;
          flex: 4;
          text-align: right;
        }
      }
    }
  }
}
</style>
